<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>遇农</title>
		<meta charset="utf-8" />
		<!-- 优先使用 IE 最新版本和 Chrome -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<!-- 页面描述 -->
		<meta name="description" content="遇农" />
		<!-- 页面关键词 -->
		<meta name="keywords" content="遇农" />
		<!-- 网页作者 -->
		<meta name="author" content="" />
		<!-- 搜索引擎抓取 -->
		<meta name="robots" content="all" />
		<!-- 为移动设备添加 viewport -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->
		<!-- iOS 设备 begin -->
		<meta name="apple-mobile-web-app-title" content="遇农" />
		<!-- 添加到主屏后的标题（iOS 6 新增） -->
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->

		<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
		<!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<!-- 设置苹果工具栏颜色 -->
		<meta name="format-detection" content="telphone=no, email=no" />
		<!-- 忽略页面中的数字识别为电话，忽略email识别 -->
		<!-- 启用360浏览器的极速模式(webkit) -->
		<meta name="renderer" content="webkit">
		<!-- 避免IE使用兼容模式 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!-- 不让百度转码 -->
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
		<meta name="HandheldFriendly" content="true">
		<!-- 微软的老式浏览器 -->
		<meta name="MobileOptimized" content="320">
		<!-- uc强制竖屏 -->
		<meta name="screen-orientation" content="portrait">
		<!-- QQ强制竖屏 -->
		<meta name="x5-orientation" content="portrait">
		<!-- UC强制全屏 -->
		<meta name="full-screen" content="yes">
		<!-- QQ强制全屏 -->
		<meta name="x5-fullscreen" content="true">
		<!-- UC应用模式 -->
		<meta name="browsermode" content="application">
		<!-- QQ应用模式 -->
		<meta name="x5-page-mode" content="app">
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<script type="text/javascript" src="js/highmaps.src.js"></script>
		<script type="text/javascript" src="js/drilldown.src.js"></script>
		<script type="text/javascript" src="js/exporting.src.js"></script>
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css">

		<!-- 	/*ie9兼容h5标签*/
	/*在 IE 浏览器的版本小于 IE9 时将读取 html5.js 文件，并解析它*/
	/*并且要放到head标签中*/ -->
		<!--[if lt IE 9]>
	    <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
	</head>

	<body>
		<!-- 头部区域 -->
		<header>

			<!-- 顶部导航 -->
			<div class="top-nav">

				<div class="logo"><img src="img/logo.png" alt="" /></div>

				<!--   <div class="date-choice" title="选择时间,查看选择作物种植温度">

                    <form name="date">

                      <select name="year" onchange="selectYear(this.value)">

                        <option value="">选择 年</option>

                      </select>

                      <select name="month" onchange="selectMonth(this.value)">

                        <option value="">选择 月</option>

                      </select>

                      <select name="day">

                        <option value="">选择 日</option>

                      </select>

                    </form>

                </div> -->
				<!-- <span id="showNav" class="show-nav">三</span> -->

				<ul class="nav">

					<li>
						<a href="index.html" class="top-nav-active">首页</a>
					</li>

					<li>
						<a href="information.html">资讯</a>
					</li>

					<li>
						<a href="crop-details.html">作物信息</a>
					</li>

					<li>
						<a href="planting search.html">种植技术</a>
					</li>

					<li>
						<a href="login.html">登陆</a>
					</li>

				</ul>
			</div>
		</header>

		<!-- 中间内容区域 -->
		<section>

			<!-- 气象图 -->
			<div class="weather-map">

				<div class="climate-tit">气象图</div>
				<!-- 气候地区 -->
				<div class="climate-area">

					<div class="climate-area-tit">选择气候地区</div>

					<div class="climate-area-legend" id="map">

						<div id="container1" style="width: 100%; height: 500px; margin: 0px auto"></div>
						<script>
							Highcharts.setOptions({
								lang: {
									drillUpText: '返回 “{series.name}”'
								}
							});

							var width = $("#container1").css("width");
							width = parseInt(width.substring(0, width.indexOf("px")));
							var map = null,
								geochina = 'https://data.jianshukeji.com/jsonp?filename=geochina/';
							$.getJSON(geochina + 'china.json&callback=?', function(mapdata) {
								var data = [];

								Highcharts.each(mapdata.features, function(md, index) {
									var tmp = {
										name: md.properties.name,
										value: Math.floor((Math.random() * 100) + 1) // 生成 1 ~ 100 随机值
									};
									if(md.properties.drilldown) {
										tmp.drilldown = md.properties.drilldown;
									}
									data.push(tmp);
								});
								map = new Highcharts.Map('container1', {
									chart: {
										events: {
											drilldown: function(e) {
												this.tooltip.hide();
												console.log(e);
												// 异步下钻
												if(e.point.drilldown) {
													var pointName = e.point.properties.fullname;
													// map.showLoading('下钻中，请稍后...');
													// 获取二级行政地区数据并更新图表
													$.getJSON(geochina + e.point.drilldown + '.json&callback=?', function(data) {
														data = Highcharts.geojson(data);
														Highcharts.each(data, function(d) {
															if(d.properties.drilldown) {
																d.drilldown = d.properties.drilldown;
															}
															d.value = Math.floor((Math.random() * 100) + 1); // 生成 1 ~ 100 随机值
														});
														map.hideLoading();
														map.addSeriesAsDrilldown(e.point, {
															name: e.point.name,
															data: data,
															dataLabels: {
																enabled: true,
																format: '{point.name}'
															}
														});
														map.setTitle({
															text: pointName
														});
													});
												}
											},
											drillup: function() {
												map.setTitle({
													text: '中国'
												});
											}
										}
									},
									title: {
										text: '中国地图'
									},
									subtitle: {
										useHTML: true,
										text: ''
									},

									//设置功能
									mapNavigation: {
										enabled: true,
										enableTouchZoom: false, // 在开启导航器的情况下关闭移动端手势操作
										buttonOptions: {
											verticalAlign: 'bottom'
										}
									},

									tooltip: {
										useHTML: true,
										headerFormat: '<table ><tr><td>{point.name}</td></tr>',
										pointFormat: '<tr><td>全称</td><td>{point.properties.fullname}</td></tr>' +
											'<tr><td>经纬度:</td><td>{point.properties.longitude},{point.properties.latitude}</td></tr>' +
											'<tr><td>最低温度:</td><td>16℃</td></tr>' +
											'<tr><td>最适温度:</td><td>16℃</td></tr>' +
											'<tr><td>最高温度:</td><td>16℃</td></tr>',
										footerFormat: '</table>',

										//
										positioner: function() {
											return {
												x: 0.73 * width,
												y: 250
											};
										}
									},

									//这里是下条栏数据显示
									//     colorAxis: {
									//         min: 0,
									//         minColor: 'Beige',
									//         maxColor: 'PowDerBlue',
									//         labels:{
									//             style:{
									//                "background color":"Ivory", "color":"LightSkyBlue","fontWeight":"bold"
									//             }
									//         }
									//     },

									colorAxis: {
										min: 0,
										max: 100,
										minColor: 'rgb(255,255,255)',
										maxColor: '#006cee',
										labels: {
											style: {
												"background color": "Ivory",
												"color": "LightSkyBlue",
												"fontWeight": "bold"
											}
										}
									},
									//显示地图省份
									plotOptions: {
										series: {
											dataLabels: {
												enabled: true,
												format: '{point.properties.fullname}'
												//map.showLoading('下钻中，请稍后...')
											}
										}
									},
									series: [{
										data: data,
										mapData: mapdata,
										joinBy: 'name',
										name: '中国地图',
										states: {
											hover: {
												color: 'Turquoise'
											}
										}
									}]

								});
							});
						</script>
					</div>

				</div>

				<!-- 地区气候图 -->
				<div class="climatic-map">

					<div class="climatic-map-tit">该地区近期气候图</div>

					<div class="climatic-map-legend">
						<div id="container" style="width: 600px; height: 450px; margin: 0px auto"></div>
						<script language="JavaScript">
							$(document).ready(function() {
								var title = {
									text: '长沙近期气温走势图'
								};
								var subtitle = {
									text: 'weather'
								};
								var xAxis = {
									categories: []
								};
								var yAxis = {
									title: {
										text: 'Temperature (\xB0C)'
									}
								};
								var plotOptions = {
									line: {
										dataLabels: {
											enabled: true
										},
										enableMouseTracking: false
									}
								};
								var series = [{
										name: '最高气温',
										data: []
									},
									{
										name: '最低气温',
										data: []
									}
								];

								var json = {};
								var alter_range = 7;

								var mydate = new Date();
								//修改x轴刻度
								var dayto = mydate.getDate();
								var year = mydate.getFullYear();
								var month = mydate.getMonth() + 1;
								for(var k = 0; k < alter_range; k++) {
									xAxis.categories[6 - k] = mydate.getDate().toString();
									var targetday_milliseconds = mydate.getTime() - 1000 * 60 * 60 * 24 * 1;
									mydate.setTime(targetday_milliseconds);
								}
								var dayfrom = xAxis.categories[0];
								$.ajax({
									url: 'demo.php',
									type: 'get',
									dataType: 'json',
									data: {
										year: 2018,
										month: month,
										dayfrom: Number(dayfrom),
										dayto: Number(dayto),
										province: 'hunan',
										city: 'asd',
									},
									success: function(data) {
										console.log(data);
										json.series = series;
										//修改最高最低气温
										for(var i = 0; i < data.length; i++) {
											json.series[0].data[i] = eval(data[i].maxtemp);
											json.series[1].data[i] = eval(data[i].mintemp);
											//alert(eval(data[i].mintemp))
										};
										json.title = title; //也需要修改
										json.subtitle = subtitle;
										json.xAxis = xAxis;
										json.yAxis = yAxis;
										json.plotOptions = plotOptions;

										$('#container').highcharts(json);
										// json.series[0].data
									}
								});

							});
						</script>
					</div>
				</div>

			</div>

			</div>

			<!-- 最新资讯 -->
			<div class="latest-information">

				<div class="latest-informatio-tit">
					最新资讯
					<span class="line"></span>
				</div>

				<ul id="info" class="latest-information-list">
					<!-- <li class="mr3">
                    <img src="img/Wheat/五一假期.png"/>
                    <div class="latest-brief-introduction"> 五一前我国中东部大部地区有较强的降雨过程，江南、华南等地降雨比常年同期偏多......
                    </div>
                    <div class="mask">五一假期雨水和强对流</div>
                </li> -->
					<!-- <li class="mr3">
                    <img src="img/Wheat/强对流.png"/>
                    <div class="latest-brief-introduction"> 预计4月26日20时至27日20时，甘肃东部、宁夏南部、陕西西北部、四川东北部......
                    </div>
                    <div class="mask">强对流天气蓝色预警</div>
                </li>
                <li class="mr3">
                    <img src="img/Wheat/驴友.png"/>
                    <div class="latest-brief-introduction"> 五一小长假马上就要到了，相信很多驴友已经准备好了一场说走就走的野营......
                    </div>
                    <div class="mask">驴友必看</div>
                </li>
                <li>
                    <img src="img/Wheat/城市雨涝.jpg"/>
                    <div class="latest-brief-introduction"> 每逢雨季，城市里或多或少地会发生一些内涝现象......
                    </div>
                    <div class="mask">城市雨涝避险</div>
                </li> -->
				</ul>

				<a href="information.html" class="more-latest-information">更多资讯</a>
			</div>

			<!-- 作物信息 -->
			<div class="crop-information">
				<div class="crop-information-tit">
					作物信息
					<span class="line"></span>
				</div>

				<!-- 农作物介绍在右边 -->

				<div class="crop-show">

					<!-- 农作物图片展示 -->
					<div class="crop-show-banner">

						<img src="img/Unhusked-rice/pic5.jpg" />

					</div>

					<!-- 农作物介绍 -->
					<div class="crop-show-introduce">

						<div class="crop-show-introduce-title">稻谷<span>Unhusked&nbsp;rice</span></div>
						属禾本科稻属普通栽培稻亚属中的普通稻亚种。人类共确认出22贸易的是普通类稻谷。
						<br/>
						<span class="green"><p class="blue">最低的温度：10℃-12℃；</p><p class="gold">最适温度：30℃-32℃；</p><p class="red">高温度：36℃-38℃</p></span>

					</div>

					<!-- 农作物小图片展示生长情况 -->
					<div class="crop-show-content">

						<ul>

							<li style="margin-right: 1.2%;">
								<a href="#"><img src="img/Unhusked-rice/pic1.jpg" /></a>
							</li>

							<li style="margin-right: 1.2%;">
								<a href="#"><img src="img/Unhusked-rice/pic2.jpg" /></a>
							</li>

							<li style="margin-right: 1.2%;">
								<a href="#"><img src="img/Unhusked-rice/pic3.jpg" /></a>
							</li>

							<li>
								<a href="#"><img src="img/Unhusked-rice/pic4.jpg" /></a>
							</li>

						</ul>

					</div>

				</div>

				<a href="crop-details.html" class="more-crop-information">更多作物信息</a>

			</div>

			<!-- 尾部区域 -->

			<footer>
				<div class="footer-logo">
					<img src="img/logo2.png" alt="" />
				</div>

				<div class="footer-title">遇农</div>
			</footer>
		</section>

		<!-- <script type="text/javascript" src="js/jsMap/jsMap-3.1.1.js" ></script>
<script type="text/javascript" src="js/jsMap/jsMap-3.1.1.min.js" ></script> -->
		<script type="text/javascript" src="js/index.js"></script>
		<!-- <script src="https://img.hcharts.cn/highmaps/highmaps.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/drilldown.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script> -->
		<script>
			$.ajax({
				url: 'fun/infomation.php',
				type: 'post',
				dataType: 'json',
				data: {
					start: 0,
					count: 4,
				},
				success: function(data) {
					console.log(data);
					for(var i = 0; i < data.length - 1; i++) {
						var main = data[i].main.substr(0, 60);
						console.log(data[i].main.length >= 60)
						if(data[i].main.length >= 60)
							main += "......";
						$("ul#info").append(
							"<li class='mr3'>" +
							"<img src='" +
							data[i].url +
							"'/>" +
							"<div class='latest-brief-introduction'>" +
							main +
							"</div>" +
							"<div class='mask'>" +
							data[i].title +
							"</div>" +
							"</li>"
						)

					}
					$("ul#info").append(
						"<li class='mr'>" +
						"<img src='" +
						data[i].url +
						"'/>" +
						"<div class='latest-brief-introduction'>" +
						data[i].main.substr(0, 60) + "......" +
						"</div>" +
						"<div class='mask'>" +
						data[i].title +
						"</div>" +
						"</li>")
				}
			});
		</script>
	</body>

</html>